<html>
	<head>
		<title>Hsiao-CropUpload插件Demo</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<script src="./dist/jquery.min.js"></script>
		<link href="./dist/ext/Jcrop/Jcrop.min.css" rel="stylesheet">
		<script src="./dist/ext/Jcrop/Jcrop.min.js"></script>
		<script src="./dist/jquery.cropupload.js"></script>
	</head>
	<body>
		<div class="upload"></div>
		<button class="startUpload">手动上传</button>
		<script>
			var bounds;
			$('.upload').cropupload({
				url : 'upload.php',
				autoload : false,	//如果preview = true，autoload设置无效
				preview : true,
				multiple : true,
				fileType : 'jpg',
				progress : function(process){
					console.log("上传进度："+process);
				},
				success : function(res){
					console.log("上传成功");
					console.log(res);
				},
				crop : {
					/* 这部分参数参照Jcrop官方文档 */
					options : {
						aspectRatio: 1,		//选框宽高比。说明：width/height
						allowMove:true,		//允许选框移动
						allowResize:true,	//允许选框缩放
						minSize:[50,50],	//选框最小尺寸
						setSelect: [0,0,100,100]	//设置预选框
					},
					callback : function(e,s,c){
						bounds = c;
						console.log('选框X轴坐标:'+c.x);
						console.log('选框Y轴坐标:'+c.y);
					}
				},
				onSelect : function(file){
					console.log(file);
				},
				fileUrl : function(fileUrl){
					//多、单文件上传获取文件预览地址，用于自定义预览
					for(i=0;i<fileUrl.length;i++){
						html = '<img src="'+fileUrl[i]+'" id="preview" />';
						$('body').append(html);
					}
				},
				beforeUpload : function(){
					$('.upload').trigger('setData',bounds);
				}
			});
			
			$('.startUpload').click(function(){
				$('.upload').trigger('startUpload');
			});
		</script>
	</body>
</html>